<template>
    <el-form ref="parkInfoFormRef" :model="form" :rules="rules" label-width="80px">
        <el-form-item label="备注" prop="remark">
            <el-input v-model="form.remark" placeholder="请输入备注" />
        </el-form-item>
        <el-form-item label="园区名称" prop="parkName">
            <el-input v-model="form.parkName" placeholder="请输入园区名称" />
        </el-form-item>
        <el-form-item label="园区编号" prop="parkInfoCode">
            <el-input v-model="form.parkInfoCode" placeholder="请输入园区编号" />
        </el-form-item>
    </el-form>

    <!-- eslint-disable prettier/prettier -->
    <div style="display: flex; justify-content: center; align-items: center;">
        <el-button :loading="buttonLoading" :disable="buttonLoading" type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="emit('close')">取 消</el-button>
    </div>
</template>

<!-- eslint-disable prettier/prettier -->
<script setup name="ParkInfo" lang="ts">
import request from '@/utils/request';

const { proxy } = getCurrentInstance() as any;
const { } = toRefs<any>(proxy?.useDict());
const emit = defineEmits(['close', 'success']);
const props = defineProps({
  parkInfoId: {
    type: String,
    required: true
  }
});

const buttonLoading = ref(false);
const parkInfoFormRef = ref<ElFormInstance>();

const form = ref<any>({
  parkInfoId: undefined,
  remark: undefined,
  parkName: undefined,
  parkInfoCode: undefined
})

const rules = ref<any>({
  parkInfoId: [
    { required: true, message: '主键不能为空', trigger: 'blur' }
  ],
  parkName: [
    { required: true, message: '园区名称不能为空', trigger: 'blur' }
  ]
})

/** 提交 */
const submitForm = () => {
  parkInfoFormRef.value?.validate(async (valid: boolean) => {
    if (valid) {
      buttonLoading.value = true;
      await request({ url: '/park/park-info', method: 'put', data: form.value }).finally(() => buttonLoading.value = false);
      proxy?.$modal.msgSuccess('操作成功');
      emit('success');
      emit('close');
    }
  });
}

/** 获取详情 */
const getInfo = async()=>{
  proxy?.$modal.loading('加载中...')
  const res = await request({ url: '/park/park-info/' + props.parkInfoId, method: 'get' }).finally(() => proxy?.$modal.closeLoading())
  Object.assign(form.value, res.data);

  console.log('获取详情：', res)
}

onMounted(()=>{
  getInfo()
})
</script>
<style lang="scss" scoped>

</style>
